import { Card, InputNumber, Button } from "antd";
import { useState, useEffect } from "react";
import "./JoinChatRoom.css";

function JoinChatRoom({ onClick }) {
  const { Meta } = Card;
  const [inputVal, setInputVal] = useState({
    value1: "",
    value2: "",
    value3: "",
    value4: "",
  });
  const [isCheck, setIsCheck] = useState(true);

  useEffect(() => {
    let inputList = document.querySelectorAll("input");
    let focusIndex = null;

    inputList.forEach((input, index) => {
      input.i = index;
      input.oninput = function (e) {
        this.value = e.data;
        let next = inputList[input.i + 1];
        if (!next) {
          this.blur();
          return;
        }
        next.focus();
      };
      input.onfocus = function () {
        focusIndex = this.i;
      };
      input.onblur = function () {
        focusIndex = null;
      };
    });

    document.addEventListener(
      "keydown",
      function (e) {
        if (e.code === "Backspace" && focusIndex !== null) {
          e.preventDefault();
          inputList[focusIndex].value = null;
          if (inputList[focusIndex - 1]) {
            inputList[focusIndex - 1].focus();
          }
        }
      },
      true
    );
  }, []);

  useEffect(() => {
    setIsCheck(Object.values(inputVal).some((item) => item === ""));
  }, [inputVal]);

  const handleOk = () => {};

  const handleCancel = () => {
    setIsCreateModalOpen(false);
    setIsJoinModalOpen(false);
  };
  return (
    <>
      <div className="box">
        <Card
          bordered={false}
          style={{
            width: "40%",
          }}
          cover={
            <img
              alt="example"
              src="../../../static/images/inputRoomNumber.png"
            />
          }
        >
          <Meta title="请输入聊天室ID" style={{ textAlign: "center" }}></Meta>
        </Card>
        <div className="input-code">
          <input
            type="number"
            value={inputVal.value1}
            onInput={(e) =>
              setInputVal({ ...inputVal, value1: e.nativeEvent.data })
            }
            onKeyDown={(e) => {
              e.code === "Backspace";
              setInputVal({ ...inputVal, value1: "" });
            }}
          />
          <input
            type="number"
            value={inputVal.value2}
            onInput={(e) =>
              setInputVal({ ...inputVal, value2: e.nativeEvent.data })
            }
            onKeyDown={(e) => {
              e.code === "Backspace";
              setInputVal({ ...inputVal, value2: "" });
            }}
          />
          <input
            type="number"
            value={inputVal.value3}
            onInput={(e) =>
              setInputVal({ ...inputVal, value3: e.nativeEvent.data })
            }
            onKeyDown={(e) => {
              e.code === "Backspace";
              setInputVal({ ...inputVal, value3: "" });
            }}
          />
          <input
            type="number"
            value={inputVal.value4}
            onInput={(e) =>
              setInputVal({ ...inputVal, value4: e.nativeEvent.data })
            }
            onKeyDown={(e) => {
              e.code === "Backspace";
              setInputVal({ ...inputVal, value4: "" });
            }}
          />
        </div>
      </div>
      <div className="box-footer">
        <Button size="large" key="cancel" onClick={onClick}>
          取消
        </Button>
        <Button
          size="large"
          type="primary"
          key="ok"
          onClick={handleOk}
          disabled={isCheck}
        >
          确定
        </Button>
      </div>
    </>
  );
}

export default JoinChatRoom;
